<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script
	src="${pageContext.request.contextPath }/resource/js/jquery-2.min.js"></script>
<script
	src="${pageContext.request.contextPath }/resource/js/showModalDialog.js"></script>
<title>体质查询页面</title>
<style type="text/css">
a {
	text-decoration: none;
}

.table2 {
	border: #C8C8C8 solid;
	border-width: 1px 0px 0px 1px;
	background: #F3F0F0;
	margin-top: 25px;
}

.td0 {
	border: #C8C8C8 solid;
	border-width: 0 0 1px 0;
}

.td2 {
	border: #C8C8C8 solid;
	border-width: 0 1px 1px 0;
}

.barcon {
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.barcon1 {
	font-size: 17px;
	float: left;
	margin-top: 20px;
}

.barcon2 {
	float: right;
}

.barcon2 ul {
	margin: 20px 0;
	padding-left: 0;
	list-style: none;
	text-align: center;
}

.barcon2 li {
	display: inline;
}

.barcon2 a {
	font-size: 16px;
	font-weight: normal;
	display: inline-block;
	padding: 5px;
	padding-top: 0;
	color: black;
	border: 1px solid #ddd;
	background-color: #fff;
}

.barcon2 a:hover {
	background-color: #eee;
}

.ban {
	opacity: .4;
}

.oparea {
	display: inline-block;
	margin-right: 5px;
}
.button {
  display: inline-block;
  padding: 3px 10px;
  font-size: 16px;
  background-color: #C7C7CC;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px #999;
  margin-right: 5px;
}
.button:hover {background-color: #e7e7e7; color: black;}

.button:active {
  background-color: #3e8e41;
  color: black;
  box-shadow: 0 2px #666;
  transform: translateY(2px);
}
。deleteButton{
 background-color: #C7C7CC;
}
</style>
</head>
<body>
	<table width="950" cellpadding="0" cellspacing="0" class="table2"
		align="center">
		<thead>
			<tr>
				<td colspan="3" height="33" class="td0"></td>
				<td align="center" class="td2"><a href="###" onclick="save()">添加用户</a></td>
			</tr>
			<tr align="center">
				<th width="150" height="33" class="td2">序号</th>
				<th width="300" class="td2">体质</th>
				<th width="250" class="td2">中医专家</th>
				<th width="250" class="td2">操作</th>
			</tr>
		</thead>
		<tbody id="adminTbody">
		</tbody>
	</table>
	<div id="barcon" class="barcon">
		<div id="barcon1" class="barcon1"></div>
		<div id="barcon2" class="barcon2">
			<ul>
				<li><a href="###" id="firstPage">首页</a></li>
				<li><a href="###" id="prePage">上一页</a></li>
				<li><a href="###" id="nextPage">下一页</a></li>
				<li><a href="###" id="lastPage">尾页</a></li>
				<li><select id="jumpWhere">
				</select></li>
				<li><a href="###" id="jumpPage" onclick="jumpPage()">跳转</a></li>
			</ul>
		</div>
	</div>
	<script>
		function save() {
			var url = "solutionMangerAdd.jsp";
			var obj = "name";
			var windowStatus = 'dialogWidth:650px;dialogHeight:500px;center:yes;status:0;';
			//window.open ("solutionMangerAdd.jsp", "newwindow", "height=600, width=600, top=100, left=200, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
			window.showModalDialog(url, obj, windowStatus);
		}

		/*动态生成用户函数 
		 num为生成的用户数量   
		 */
		function dynamicAddUser(data) {
			var length = data.length;
			for (var i = 0; i < length; i++) {

				var cor = data[i][4];

				var doctor = data[i][7];
				
				var id = data[i][0];
				
			
				var trNode = $("<tr align='center'></tr>");
				//序号
				var tdNodeNum = $("<td class='td2' style='width:150px;height:33px;'>"
						+ (i + 1) + "</td>");
				//体质
				var tdNodeCor = $("<td id='tdNodeCor' class='td2' style='width:300px' >"
						+ cor + "</td>");
				//中医专家
				var tdNodeDoctor = "tdNodeDoctor" + i;
				var tdNodeDoctors = $("<td id=\"" + tdNodeDoctor + "\" class='td2' style='width:250px' ><span style='display:inline-block; text-align:center;'>"
						+ doctor + "</span></td>");
				//操作 
				var tdNodeOper = $("<td class='td2' style='width:170px;'><button class='button' onclick='view(\"" + id + "\")' >查看</button><button class='button' onclick='update(\""
						+ i
						+ "\")'>编辑</button>"
						+ "<button class='button deleteButton' onclick='corDelete(\""
						+ id
						+ "\")'>删除</button>" + "</td>");
				trNode.append(tdNodeNum);
				trNode.append(tdNodeCor);
				trNode.append(tdNodeDoctors);
				trNode.append(tdNodeOper);

				var adminTbody = $("#adminTbody");
				adminTbody.append(trNode);

			}
		}

		function update(i) {
			alert("修改成功" + i);
		}
        function view(data){
        	var url = "solutionMangerView.jsp";
			var obj = data;
			var windowStatus = 'dialogWidth:650px;dialogHeight:500px;center:yes;status:0;';
			window.showModalDialog(url, obj, windowStatus);
        }
		function corDelete(id) {
		/* 	$.ajax({
				type : "get",
				url : "${pageContext.request.contextPath}/delete.do",
				data:{id:id},
				async : true,
				success:function(){
					alert("删除成功");
					window.location.reload(); 
				}
			}) */
		}
		$(function() {
			$.ajax({
				type : "get",
				url : "${pageContext.request.contextPath}/query.do",
				async : true,
				success : function(data) {
					var date = data;
					dynamicAddUser(date);
					var tempValue= $("<input type='hidden' id='rowNum' value=\"" + date.length + "\">")
					$("#barcon").append(tempValue);
					goPage(1, 10);
				}
			});
			var tempOption = "";
			for (var i = 1; i <= totalPage; i++) {
				tempOption += '<option value='+i+'>' + i + '</option>'
			}
			$("#jumpWhere").html(tempOption);
		})
		/** 
		 * 分页函数 
		 * pno--页数 
		 * psize--每页显示记录数 
		 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数 
		 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能 
		 **/

		var pageSize = 0;//每页显示行数  
		var currentPage_ = 1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。  
		var totalPage;//总页数  
		function goPage(pno, psize) {
			var itable = document.getElementById("adminTbody");
			var num = $("#rowNum").val();//表格所有行数(所有记录数)
			pageSize = psize;//每页显示行数  
			//总共分几页   
			if (num / pageSize > parseInt(num / pageSize)) {
				totalPage = parseInt(num / pageSize) + 1;
			} else {
				totalPage = parseInt(num / pageSize);
			}
			var currentPage = pno;//当前页数  
			currentPage_ = currentPage;
			var startRow = (currentPage - 1) * pageSize + 1;
			var endRow = currentPage * pageSize;
			endRow = (endRow > num) ? num : endRow;
			//遍历显示数据实现分页  
			/*for(var i=1;i<(num+1);i++){     
			    var irow = itable.rows[i-1]; 
			    if(i>=startRow && i<=endRow){ 
			        irow.style.display = "";     
			    }else{ 
			        irow.style.display = "none"; 
			    } 
			}*/

			$("#adminTbody tr").hide();
			for (var i = startRow - 1; i < endRow; i++) {
				$("#adminTbody tr").eq(i).show();
			}
			var tempStr = "共" + num + "条记录 分" + totalPage + "页 当前第"
					+ currentPage + "页";
			document.getElementById("barcon1").innerHTML = tempStr;

			if (currentPage > 1) {
				$("#firstPage").on("click", function() {
					goPage(1, psize);
				}).removeClass("ban");
				$("#prePage").on("click", function() {
					goPage(currentPage - 1, psize);
				}).removeClass("ban");
			} else {
				$("#firstPage").off("click").addClass("ban");
				$("#prePage").off("click").addClass("ban");
			}

			if (currentPage < totalPage) {
				$("#nextPage").on("click", function() {
					goPage(currentPage + 1, psize);
				}).removeClass("ban")
				$("#lastPage").on("click", function() {
					goPage(totalPage, psize);
				}).removeClass("ban")
			} else {
				$("#nextPage").off("click").addClass("ban");
				$("#lastPage").off("click").addClass("ban");
			}

			$("#jumpWhere").val(currentPage);
		}

		function jumpPage() {
			var num = parseInt($("#jumpWhere").val());
			if (num != currentPage_) {
				goPage(num, pageSize);
			}
		}
	</script>
</body>
</html>